<template>
  <div>
    <div class = "title">
      <!-- 标题 -->
      <a href = "javascript:void(0)">{{ item.name }}</a>
      <!-- 箭头符号 -->
      <svg class = "icon" height = "16" viewBox = "0 0 1024 1024" width = "16">
        <path
            d = "M472.064 751.552 72.832 352.32c-22.08-22.08-22.08-57.792 0-79.872 22.016-22.016 57.792-22.08 79.872 0L512 631.744l359.296-359.296c22.016-22.016 57.792-22.08 79.872 0 22.08 22.08 22.016 57.792 0 79.872l-399.232 399.232C529.856 773.568 494.144 773.568 472.064 751.552z"
            fill = "#999999"/>
      </svg>
    </div>
    <div class = "children">
      <template v-for = "itemX in item.children">
        <sub-menu
            :base-path = "resolvePath(itemX.path)"
            :item = "itemX"
            :key = "itemX.path"
            v-if = "itemX.children && itemX.children.length>1"
        />
        <menu-item
            :key = "itemX.path"
            :path = "resolvePath(itemX.path)"
            :title = "itemX.name"
            v-else
        />
      </template>
    </div>
  </div>
</template>

<script>
import path from 'path'
import MenuItem from "./MenuItem"

export default {
  components: {MenuItem},
  name: 'subMenu', // 一定要写 name，不然递归调用自己会报错
  props: {
    item: { // route object
      type: Object,
      required: true
    },
    basePath: { // 上级 path
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  methods: {
    // 将 routePath 和 basePath 拼接起来
    resolvePath(routePath) {
      return path.resolve(this.basePath, routePath)
    }
  }
}
</script>

<style scoped>
.title {
  padding: 20px;
  color: rgb(153, 153, 153);
}

.title:hover {
  background: rgb(244, 244, 244);
}

.children {
  padding-left: 20px;
  background: rgb(244, 244, 244);
}

.icon {
  float: right;
  color: #999999;
}
</style>